<!DOCTYPE html>
<!-- 引入标准模板 -->
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultrag.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<!-- 引入static路径文件直接从下属文件夹开始，如果是里层目录需要加下划线，根目录则不用 -->
<link href="/plugin/css/button.css" rel="stylesheet">
<!-- 首页使用layUI布局，设置登录入口，为人脸识别预留接口 -->
<link rel="icon" href="image/common/deep_pro.ico" type="image/x-icon" />
<script src="plugin/js/jquery-3.1.1.min.js" type="text/javascript"></script>
  <!-- 极验证 暂未使用-->
  <!--<script src="js/gt.js" type="javascript"></script>-->
  <!-- jQuery验证 -->
  <script src="js/jquery.slider.min.js"></script>
  <link rel="stylesheet" href="css/jquery.slider.css">
<!-- layui样式 -->
<link rel="stylesheet" href="plugin/layui/layui/css/layui.css">
<!-- <link rel="stylesheet" th:src="@{plugin/layui/layui/css/layui.css}"> -->

<!-- layuiJS -->
<script src="plugin/layui/layui/layui.js" type="text/javascript"></script>
<title>DeepPro</title>
<style>
body{
	background-image: url('image/common/bg01.jpg');
}
  .layui-card{
    margin-top: 100px;
  }
  #slider2{
    margin-left: 30px;
  }
  .deep_describe{
    margin-top: 50px;
  }
</style>
</head>
<body>
<ul class="layui-nav" id="ultheme">
  <li class="layui-nav-item"><a href="https://gitee.com/LvLvFeng/DeepPro" target="_blank">DeepPro首页</a></li>
  <li class="layui-nav-item layui-this" ><a href="javascript:;">绿绿峰</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">办公实用程序</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;" id="face_login">人脸登陆</a></dd>
      <dd class="layui-this" id="calculate"><a href="#">计算器</a></dd>
      <dd><a href="#" id="calendar">日历</a></dd>
      <dd><a href="/fileup/ai/image">图像识别</a></dd>
      <dd><a href="/fileup/ai/ocr">文字识别</a></dd>
    </dl>
  </li>
</ul>
<!-- 中部布局展示部分 -->
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md8">
      <div class="deep_describe">
        <h2 style="color: #fffdfe"><img src="/image/common/deep_pro.ico">&nbsp;&nbsp;&nbsp;&nbsp;[Deep Pro]</h2>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-note"></i>&nbsp;一个基于spring boot的系统管理模板</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-flag"></i>&nbsp;基于java web，Maven所构建</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-template"></i>&nbsp;集成前端框架layui、boostrap、fileupload、amazeUI、flatUI</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-app"></i>&nbsp;数据展示模板ChartJS、ECharts；动画库animate；轻量图形库rough</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-upload-drag"></i>&nbsp;在线数据接口NowAPI、百度人工智能</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-diamond"></i>&nbsp;封装MD5,DES等多种加密方法</h3>
        <h3 style="color: #fffdfe"><i class="layui-icon layui-icon-fire"></i>&nbsp;未来将继续完善thymeleaf，mybatis generate、bootstrap tree、shiro等功能，敬请期待！</h3>
      </div>
    </div>
    <!-- 用户登录部分 -->
    <div class="layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header"><h4><i class="layui-icon layui-icon-user"></i>&nbsp;登录</h4></div>
            <div class="layui-card-body">
              <form class="layui-form" enctype="multipart/form-data" id="myLogin" method="post" action="/user"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item">
                  <label class="layui-form-label">用户名：</label>
                  <div class="layui-input-block">
                    <input type="text" name="username" id="username" lay-verify="required" placeholder="键入用户名" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">口令：</label>
                  <div class="layui-input-block">
                    <input type="text" name="password" id="password" lay-verify="required" placeholder="键入口令" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">记住密码？</label>
                  <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div id="slider2" class="slider"></div><!-- jQuery验证组件 -->
                </div>
                <div class="layui-form-item">
                  <!--<div class="layui-input-block">-->&nbsp;&nbsp;
                    <button type="button" id="commit_btn" class="layui-btn layui-btn-radius layui-btn-normal " lay-submit lay-filter="*"><i class="layui-icon layui-icon-release"></i>&nbsp;登录</button>
                    <button type="reset" id="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i class="layui-icon layui-icon-refresh-1"></i>&nbsp;重置</button>
                    <button type="button" id="order_login" class="layui-btn layui-btn-radius "><i class="layui-icon layui-icon-auz"></i>&nbsp;授权登录</button>
                  <!--</div>-->
                </div>
                <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 第三方登录 -->
                <!--<button type="button" class="button button-action button-circle button-longshadow"><i class="layui-icon layui-icon-login-wechat"></i></button>-->
                <!--<button type="button" class="button button-action button-circle button-longshadow"><i class="layui-icon layui-icon-login-qq"></i></button>-->
                <!--<button type="button" class="button button-action button-circle button-longshadow"><i class="layui-icon layui-icon-login-weibo"></i></button>-->
              </form>
            </div>
      </div>
    </div>
  </div>
</div>

<!--<p th:text="'我是文本输出'"></p>-->



<script>
var flag = false;
//还原验证状态
  $("#reset").click(function() {
      $("#slider2").slider("restore");
      flag = false;
  });
  //模块化加载
layui.use(['element','form','layer','laypage','carousel'], function(){
  var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
  form = layui.form,	//引入表单元素控件
  layer = layui.layer,	//弹出层组件
  laypage = layui.laypage, //获得laypage模块
  carousel = layui.carousel;  //轮播组件
  //001.监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
  //003.弹出层
  $('#calendar').click(function(){
	  layer.open({
		  title: "日历",
		  type: 2,
		  area: ['710px', '500px'],
		  fixed: false, //不固定
		  maxmin: false,	//不允许最大最小
		  resize: false,	//禁止拉伸
		  scrollbar: true,	//后边可以滚动
		  content: ['miniapp/calendar/calendar.html','no']	//文件位置，禁止滚动条
		});
  });
  //004.授权第三方登录
  $('#order_login').click(function () {
      layer.open({
          title: "第三方登录",
          type: 2,
          area: ['710px', '500px'],
          fixed: false, //不固定
          maxmin: false,	//不允许最大最小
          resize: false,	//禁止拉伸
          scrollbar: true,	//后边可以滚动
          content: ['/auth','no']	//文件位置，禁止滚动条
      });
  });
  //005.计算器
  $('#calculate').click(function () {
      layer.open({
          title: "计算器",
          type: 2,
          area: ['580px', '400px'],
          fixed: false, //不固定
          maxmin: false,	//不允许最大最小
          resize: false,	//禁止拉伸
          scrollbar: true,	//后边可以滚动
          content: ['miniapp/calculate/calculator.html','no']	//文件位置，禁止滚动条
      });
  });
    //滑动验证
    $("#slider2").slider({
        width: 300, // width
        height: 30, // height
        sliderBg:"rgb(134, 134, 131)",// 滑块背景颜色
        color:"#fff",// 文字颜色
        fontSize: 14, // 文字大小
        bgColor: "#33CC00", // 背景颜色
        textMsg: "按住滑块，拖拽验证", // 提示文字
        successMsg: "验证通过", // 验证成功提示文字
        successColor: "red", // 滑块验证成功提示文字颜色
        time: 400, // 返回时间
        callback: function(result) { // 回调函数，true(成功),false(失败)
            flag = result;
        }
    });
    $('#commit_btn').click(function(){
        if($("#username").val() == "" || $("#password").val() == ""){
            flag = false;
        }
        if(flag){
            $.ajax({
                type: "POST",
                url: "/user/login",
                // data: {}, //data可以逐个放入参数，也可以序列化全部提交
                data: $('#myLogin').serialize(),
                dataType: "json",
                success: function (res) {
                    // alert(JSON.stringify(res));
                    if(res.state == "success"){
                        window.location.href = '/main';
                    }else{
                        layer.msg("用户名或密码不正确！");
                    }
                }
            });
        }else{
            layer.msg("请完成拖动校验！");
        }
    });
    //人脸识别登陆
    $('#face_login').click(function () {
        layer.open({
            title: "人脸识别登录",
            type: 2,
            area: ['600px', '500px'],
            fixed: false, //不固定
            maxmin: true,	//允许最大最小
            resize: false,	//禁止拉伸
            scrollbar: true,	//后边可以滚
            content: ['/face','no']	//文件位置，禁止滚动条
        });
    });
});
</script>	
</body>
</html>